<script setup lang="tsx">
interface Emits {
  (e: 'search', model: MenuPageListApi.MenuTableListParams): void;
}

const emit = defineEmits<Emits>();

const model = defineModel<any>('model', { required: true });

function search() {
  emit('search', model.value);
}

function reset() {
  model.value = {
    menuName: '',
    status: ''
  };
  emit('search', model.value);
}
</script>

<template>
  <!-- <ACard :title="null" :bordered="false" class="search-card card-wrapper"> -->
  <AForm
    ref="formRef"
    :model="model"
    :label-col="{
      span: 5,
      md: 7
    }"
    class="search-form"
  >
    <div class="w-full flex">
      <ARow :gutter="[15, 8]" wrap class="w-full">
        <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="4">
          <AFormItem label="条码ID" name="pnlId" class="m-0" :label-col="{}">
            <AInput
              v-model:value="model.pnlId"
              placeholder="请输入条码ID"
              class="min-form-control"
              allow-clear
              autocomplete="off"
              @keypress.enter="search"
            />
          </AFormItem>
        </ACol>
        <div class="flex">
          <AFormItem class="m-0">
            <div class="w-full flex-y-center justify-end gap-12px">
              <AButton type="primary" ghost class="mini-btn" @click="search">
                <template #icon>
                  <icon-ic-round-search class="align-sub text-icon" />
                </template>
                <span class="ml-3px">{{ $t('common.search') }}</span>
              </AButton>

              <!--
 <AButton class="mini-btn" @click="reset">
                  <template #icon>
                    <icon-ic-round-refresh class="align-sub text-icon" />
                  </template>
                  <span class="ml-3px">{{ $t('common.reset') }}</span>
                </AButton>
-->
            </div>
          </AFormItem>
        </div>
      </ARow>
    </div>
  </AForm>
  <!-- </ACard> -->
</template>

<style></style>
